<!DOCTYPE html>
<html>
    <head>
        <title>职统</title>
        <link rel="stylesheet" href="/styles/common.css"/>
        <script type="text/javascript" src="/styles/js/jquery-1.7.2.js"></script>

    </head>
    <body>
         <#include "top.ftl">
        <div class="page-body">
            <#include "leftmenu.ftl">
            <div class="page-content">
                <div class="content-nav">
                    人员管理 > 部门管理
                </div>
                <form action="/admin/adddepartment">
                    <fieldset>
                        <legend>添加部门</legend>
                        部门名称:
                        <input type="text" name="departmentname" id="departmentname" maxlength="20"/>
                        <input type="submit" class="clickbutton" value="添加"/>
                        <#if status??><span style="color: red">${status}</span></#if>
                    </fieldset>
                </form>
                <table class="listtable">
                    <caption>所有部门:</caption>
                    <tr class="listheader">
                        <th>部门编号</th>
                        <th>部门名称</th>
                        <th>操作</th>
                    </tr>
                    <#if deps??>
                        <#list deps as dep>
                            <tr>
                                <td>${dep.departmentid}</td>
                                <td id="depname${dep.departmentid}">${dep.departmentname}</td>
                                <td>
                                    <a class="clickbutton" href="#" id="edit${dep.departmentid}" onclick="editDep(${dep.departmentid})">编辑</a>
                                    <a class="clickbutton" style="display: none" href="#" id="cancel${dep.departmentid}" onclick="cancelDep(${dep.departmentid})">取消</a>
                                    <a class="clickbutton" href="/admin/deletedep?departmentid=${dep.departmentid}&departmentname=${dep.departmentname}">删除</a>
                                </td>
                            </tr>
                        </#list>
                    </#if>

                </table>
            </div>
        </div>
        <div class="page-footer">
            <hr/>

        </div>
        <script>
            var depnameback;
            function editDep(depid) {
                var editBtn = $('#edit'+depid);
                var cancelBtn = $('#cancel'+depid);
                var ele = $('#depname'+depid);
                depnameback=ele.html();
                console.log(depnameback)
                if(cancelBtn.css('display') == 'none'){
                    cancelBtn.css('display','inline');
                    editBtn.html('确定');
                    var depname = ele.text();
                    ele.html('<input type="text" value="'+depname+'"/>')
                }else{
                    var children = ele.children('input');
                    var valu = children.val();
                    $.post("/admin/updatedep",{id:depid,name:valu},function (msg) {
                        if(msg == 'success'){
                            cancelBtn.css('display','none');
                            editBtn.html('编辑');
                            ele.html(valu);
                        }
                    })
                }
            }
            function cancelDep(depid) {
                var editBtn = $('#edit'+depid);
                var cancelBtn = $('#cancel'+depid);
                var ele = $('#depname'+depid);
                cancelBtn.css('display','none');
                editBtn.html('编辑');
                ele.html(depnameback);
            }
        </script>
    </body>
</html>